<template>
  <div class="card dataset">
    <el-dialog title="新增组" :visible.sync="addNodeVisible" width="30%">
      <el-form label-position="right" label-width="80px" :model="parentNodeForm">
        <el-form-item label="名称">
          <el-input v-model="parentNodeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="parentNodeForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addNodeVisible = false" size="mini">取消</el-button>
        <el-button type="primary" @click="handleConfirmAddParent" size="mini">确定</el-button>
      </span>
    </el-dialog>
    <el-container>
      <el-aside width="200px" class="aside">
        <button-group :btn-group="parentOptBtnGroup" @add-click="handleAddParent"/>
        <div class="aside-content">
          <div v-for="item in rootNodeList" :key="item.id" class="aside-content-item" @click="handleChangeParent(item)">
            {{ item.name }}
          </div>
        </div>
      </el-aside>
      <el-main>
        <button-group :btn-group="optBtnGroup" @add-click="add" @delete-click="handleDeleteParent"/>
        <el-table
          :data="tableData"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column align="center" label="名称" prop="name">
            <template slot-scope="scope">
              <div v-if="scope.row.editMode == 'edit'">
                <el-input v-model="scope.row.name"></el-input>
              </div>
              <div v-if="scope.row.editMode == 'detail'">
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="created_on">
            <template slot-scope="scope">
              <span>{{ scope.row.created_on ? scope.row.created_on.slice(0, 10) : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注" prop="remark">
            <template slot-scope="scope">
              <div v-if="scope.row.editMode == 'edit'">
                <el-input v-model="scope.row.remark"></el-input>
              </div>
              <div v-if="scope.row.editMode == 'detail'">
                <span>{{ scope.row.remark }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div v-if="scope.row.editMode == 'edit'">
                <el-button type="primary" size="mini" @click="save(scope.row)">保存</el-button>
                <el-button size="mini" @click="cancel(scope.row)">取消</el-button>
              </div>
              <div v-if="scope.row.editMode == 'detail'">
                <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
              </div>
          </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ButtonGroup from "@/components/Common/ButtonGroup.vue";
export default {
  name: "Dataset",
  components: {
    ButtonGroup,
  },
  data() {
    return {
      addNodeVisible: false,
      parentNodeForm: {},
      parentOptBtnGroup: [
        {
          type: 'primary',
          text: '新增',
          action: 'add'
        },
      ],
      optBtnGroup: [
        {
          type: 'primary',
          text: '新增子节点',
          action: 'add'
        },
        {
          type: 'danger',
          text: '删除当前组',
          action: 'delete'
        }
      ],
      tableData: [],
      filterForm: {
        name: "",
      },
      btnGroup: [
        {
          type: "primary",
          text: "搜索",
          action: "search",
        },
      ],
      curParentNode: {},
      rootNodeList: [],
    };
  },
  created() {
    this.getParentNodes()
  },
  methods: {
    getParentNodes() {
      this.$http.dataset.getChildrenById({ id: 0 }).then(res => {
        this.rootNodeList = res.data
        this.curParentNode = this.rootNodeList[0]
        this.getChildrenNodes()
      })
    },
    getChildrenNodes() {
      this.$http.dataset.getChildrenById({ id: this.curParentNode.id }).then(res => {
        this.tableData = res.data.map(item => {
          item.editMode = 'detail'
          return item
        })
      })
    },
    handleAddParent() {
      this.parentNodeForm = {
        name: '',
        remark: '',
        parent_id: 0,
        parent_name: 'root'
      }
      this.addNodeVisible = true
    },
    handleChangeParent(item) {
      this.curParentNode = item
      this.getChildrenNodes()
    },
    handleConfirmAddParent() {
      this.$http.dataset.add([this.parentNodeForm]).then(res => {
        this.$message.success('保存成功')
        this.addNodeVisible = false
        this.getParentNodes()
      })
    },
    handleDeleteParent() {
      // 接口调用
      this.$http.dataset.delete([this.curParentNode]).then(() => {
        this.$message.success('删除成功')
        this.getParentNodes()
      })
    },
    add() {
      const obj = {
        editMode: 'edit',
        name: '',
        remark: '',
        parent_id: this.curParentNode.id,
        parent_name: this.curParentNode.name
      }
      this.tableData.unshift(obj)
    },
    edit(row) {
      row.editMode = 'edit'
    },
    cancel(row) {
      if (!row.id) {
        this.tableData.shift()
      } else {
        this.getChildrenNodes()
      }
    },
    save(row) {
      if (row.id) {
        // 更新
        this.$http.dataset.update([row]).then(res => {
          this.$message.success('保存成功')
          this.getChildrenNodes()
        })
      } else {
        // 添加
        this.$http.dataset.add([row]).then(res => {
          this.$message.success('保存成功')
          this.getChildrenNodes()
        })
      }
    },
    del(row) {
      // 接口调用
      this.$http.dataset.delete([row]).then(() => {
        this.$message.success('删除成功')
        this.getChildrenNodes()
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  padding: 10px;
}

.filter-box {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.content-box {
  padding-top: 10px;
}

.aside {
  border-right: 1px solid lightgray;
  height: calc(100vh - 70px);

  &-content {
    height: calc(100vh - 70px);
    padding: 10px;

    &-item {
      border: 1px solid rgb(230, 230, 230);
      height: 40px;
      margin-bottom: 6px;
      border-radius: 4px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      
      &:hover {
        box-shadow: 0px 0px 2px 1px rgb(227, 227, 227);
        cursor: pointer;
      }
    }
  }
}
</style>
